<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css"/>
    <link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css"/>
    <link href="/api-ui/static/css/common/checkbox.css" rel="stylesheet"/>
    <!--vue脚本库-->
    <script type="text/javascript"
            src="/api-ui/static/js/vue/vue-3.2.4.global.js">
    </script>
    <!--axios脚本库-->
    <script type="text/javascript"
            src="/api-ui/static/js/vue/axios-0.18.0.min.js">
    </script>
    <!--我们自己封装的axios函数库 -->
    <script type="text/javascript"
            src="/api-ui/static/js/vue/axios-helper.js">
    </script>
    <style type="text/css">
        /* .{
                    width:1100px;

                    } */
        a {
            color: black;
        }

        a:hover {
            text-decoration: none;
        }

        .box-body {
            cursor: pointer;
        }

        .table {
            padding: 0 0 0 0 !important;
        }

        .table tr {
            background-color: white !important;
            border-bottom: 1px solid dashed !important;
        }

        .table .table-header {
            border-bottom: 1px solid dashed !important;
        }

        .box-header b:hover {
            background-color: #E7E7E7;
        }

        .box-header a {
            padding: 5px;
        }

        .box-body {
            padding: 0 0 0 0 !important;
        }

        .active {
            color: #000000;
        }

        .box-body .table-header .status {
            color: #72afd2;
        }

        .box-body .table-header .type {
            color: #72afd2;
        }

        .box-body .table-header span {
            width: 2px !important;
            height: 2px !important;
        }

        .paixu :hover {
            color: blue;
        }

        .box {
            margin-top: 10px !important;
        }
    </style>
    <script>
        /* $(
                function() {
                    $(".commen")
                            .on(
                                    "click",
                                    function() {
                                        var $e1 = $(this).addClass("mm").siblings(
                                                ".commen").removeClass("mm");
                                        var $e2 = $(this).addClass("bl")
                                                .removeClass("co").siblings(
                                                        ".commen").addClass("co")
                                                .removeClass("bl");
                                        $(".mm span")
                                                .addClass(
                                                        "glyphicon glyphicon-triangle-bottom")
                                                .siblings(".co span")
                                                .removeClass(
                                                        "glyphicon glyphicon-triangle-bottom");
                                    })
                }) */
    </script>
</head>


<body style="background-color: #ecf0f5;" id="app">
<div class="row" style="padding-top:10px">
    <div class="col-md-2">
        <h1 style="font-size: 24px; margin: 0;" class="">考勤管理</h1>
    </div>
    <div class="col-md-10 text-right">
        <a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> >
        <a disabled="disabled">考勤管理</a>
    </div>
</div>

<div class="row">
    <div class="col-md-12 thistable">
        <!--id="container"-->
        <div class="bgc-w box box-primary">
            <div class="box-header" style="padding-bottom: 20px">
                <a class="label label-success" href=""><span
                        class="glyphicon glyphicon-refresh"></span> 刷新 </a>

                <div class="input-group" style="width:150px;float:right;top:-5px">
                    <input type="text" class="form-control input-sm pull-right baseKey" value="null" v-model="userName" placeholder="查找..."/>
                    <div class="input-group-btn" style="top:-1px;">
                        <a class="btn btn-sm btn-default glyphicon glyphicon-search btn-change baseKetsubmit" @click="lookFor()"></a>
                    </div>
                </div>


            </div>
            <div class="box-body">
                <div class="table" style="padding-top: 15px;">
                    <div class="">
                        <table class="table table-hover table-striped">
                            <tr class="table-header">
                                <th scope="col">用户名</th>
                                <th scope="col" class="paixu thistype" style="color:blue;">类型
                                </th>
                                <th scope="col"><span class="paixu thistime" style="color:blue;">时间
						</span></th>
                                <th scope="col">ip</th>
                                <th scope="col ">备注</th>
                                <th scope="col"><span class="paixu thisstatus" style="color:blue;">状态
						</span></th>
                                <th scope="col">操作</th>
                            </tr>
                            <tr v-for="obj in AoaAttachmentList">
                                <td><span>
									{{obj.aoaUser.userName}}
									</span></td>
                                <td><span v-if="obj.typeId==1">
<!--                                     "" :  obj.typeId ==3 ? ""-->
											上班
									</span>
                                    <span v-else-if="obj.typeId==2">
                                        下班
                                    </span>
                                    <span v-else-if="obj.typeId==3">
                                        请假
                                    </span>
                                    <span v-else-if="obj.typeId==4">
                                        出差
                                    </span>
                                </td>

                                <td><span>
									{{obj.uploadTime}}
									</span></td>
                                <td><span>
									192.168.43.91
									</span>
                                </td>
                                <td>
                                    {{obj.attendsRemark}}
                                </td>
                                <td>
                                    <span class="label label-success" v-if="obj.statusId==1">正常</span>
                                    <span class="label label-warning" v-else-if="obj.statusId==2">早退</span>
                                    <span class="label label-danger" v-else>迟到</span>
                                </td>
<!--                                href="attendceedit.html?aid=35"-->
                                <td><a  class="label xiugai" @click="update(obj.attachmentId,obj.statusId,obj.typeId,obj.attendsRemark)"><span
                                        class="glyphicon glyphicon-edit"></span> 修改</a>
<!--                                    onclick="{return confirm('删除该记录将不能恢复，确定删除吗？');};"-->
                                    <a

                                        @click="deleteKQ(obj.attachmentId)"
                                         class="label shanchu"><span
                                        class="glyphicon glyphicon-remove"></span> 删除</a></td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
            <!--盒子尾-->
            <div class="box-footer no-padding" style="margin-top: -20px;">
                <div style="padding: 5px;">
                    <div id="page"
                         style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
                        <div style="width: 40%; float: left;">
                            <div class="pageInfo" style="margin-left: 5px;">
                                共<span>{{total}}</span>条  |每页<span>{{size}}</span>条
                                | 共<span>{{pages}}</span>页
                            </div>
                        </div>
                        <div style="width: 60%; float: left;">
                            <div class="pageOperation">
                                <!--判断是否是第一页  -->
                                <a class="btn btn-sm btn-default no-padding tablefirst"
                                   style="width: 30px; height: 20px;" @click="first()"> <span
                                        class="glyphicon glyphicon-backward"></span></a>
                                <a class="btn btn-sm btn-default no-padding tableup"
                                   style="width: 30px; height: 20px;" @click="up()">
                                    <span   class="glyphicon glyphicon-triangle-left"></span></a>
                                <a disabled="disabled" class="btn btn-default no-padding"
                                   style="width: 30px; height: 20px;">
                                    {{current}}
                                </a>
                                <!--判断是否是最后一页  -->
                                <a class="btn btn-sm btn-default no-padding tabledown"
                                   style="width: 30px; height: 20px;" @click="next"> <span
                                        class="glyphicon glyphicon-triangle-right"></span></a>
                                <a class="btn btn-sm btn-default no-padding tablelast"
                                   style="width: 30px; height: 20px;"> <span
                                        class="glyphicon glyphicon-forward" @click="last()"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                /* 分页插件按钮的点击事件 */
                /* url是从后台接收过来的链接，sort是记录排序规则 */
                $('.tablefirst').on('click', function () {
                    if (true == false) {
                        $('.thistable').load('attendcetable?page=0');
                    }
                });
                $('.tableup').on('click', function () {
                    if (true == false) {
                        $('.thistable').load('attendcetable?page=-1');
                    }
                });
                $('.tabledown').on('click', function () {
                    if (false == false) {
                        $('.thistable').load('attendcetable?page=1');
                    }
                });
                $('.tablelast').on('click', function () {
                    if (false == false) {
                        $('.thistable').load('attendcetable?page=1');
                    }

                });

                /*类型、状态、时间的排序  */
                $('.thistype').on('click', function () {
                    if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
                        $('.thistable').load('attendcetable?type=0&icon=glyphicon-triangle-top');
                    } else {
                        $('.thistable').load('attendcetable?type=1&icon=glyphicon-triangle-bottom');
                    }
                });
                $('.thisstatus').on('click', function () {
                    if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
                        $('.thistable').load('attendcetable?status=0&icon=glyphicon-triangle-top');
                    } else {
                        $('.thistable').load('attendcetable?status=1&icon=glyphicon-triangle-bottom');
                    }
                });
                $('.thistime').on('click', function () {
                    if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
                        $('.thistable').load('attendcetable?time=0&icon=glyphicon-triangle-top');
                    } else {
                        $('.thistable').load('attendcetable?time=1&icon=glyphicon-triangle-bottom');
                    }
                });
                $('.thisvisit').on('click', function () {
                    if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
                        $('.thistable').load('attendcetable?visitnum=0&icon=glyphicon-triangle-top');
                    } else {
                        $('.thistable').load('attendcetable?visitnum=1&icon=glyphicon-triangle-bottom');
                    }
                });
                /* 查找 */
                $('.baseKetsubmit').on('click', function () {
                    var baseKey = $('.baseKey').val();
                    console.log(baseKey);
                    $('.thistable').load('attendcetable?baseKey=' + baseKey + '');
                });
            </script>
        </div>
    </div>
</div>
</body>

<script>
    Vue.createApp({
        data() {
            return {
                //用户模糊查询
                userName:"",
                AoaAttachmentList: [],
                //总页数
                pages:null,
                //总数据
                total:null,
                //每页数据
                size:null,
                //页数
                current:null,
                page:{
                    size:10,
                    current:1,
                },

            }
        },
        methods: {
            lookFor(){
                this.current=1;
                this.page.current=1;
                requestGet("/api-core/aoaAttachmentList/queryList",{
                    page:this.page,
                    userName:this.userName
                }).then((resp) => {
                    console.info("resp",resp)
                    this.AoaAttachmentList = resp.records;
                    this.pages=resp.pages;
                    this.total=resp.total;
                    this.size=resp.size;
                })
            },
            //第一页
            first(){
                this.page.current=1;
                this.loadList();
            },
            //最后一页
            last(){
                this.page.current=this.pages;
                this.loadList();
            },
            //上一页
            up(){
                let ye=this.current;
                if(ye== 1){
                    alert("人家到最前面了")
                }
                ye=ye-1< 1 ? 1: (ye-1);
                //将当前页码数赋值到模型层
                this.page.current=ye;
                this.loadList();
            },
            //下一页
            next(){
                let ye=this.current;
                if(ye== this.pages){
                    alert("人家到底了")
                }
                ye=ye+1> this.pages ? this.pages: (ye+1);
                //将当前页码数赋值到模型层
                this.page.current=ye;
                this.loadList();
            },
            update(attachmentId,statusId,typeId,attendsRemark){
                sessionStorage.setItem("attachmentId",attachmentId);
                sessionStorage.setItem("statusId",statusId);
                sessionStorage.setItem("typeId",typeId);
                sessionStorage.setItem("attendsRemark",attendsRemark);
                window.location.href="/api-ui/page/attendceedit.html";
            },
            deleteKQ(attachmentId){
                if(!confirm('删除该记录将不能恢复，确定删除吗？')){
                   return;
                }
                // confirm('删除该记录将不能恢复，确定删除吗？');
                requestGet("/api-core/aoaAttachmentList/deleteById",{
                        attachmentId
                }).then((data)=>{
                    console.info(data)
                    if(data=="删除成功"){
                        window.location.href="/api-ui/page/attendceview.html";
                    }
                })
            },
            loadList(){
                requestGet("/api-core/aoaAttachmentList/queryList",this.page).then((resp) => {
                    console.info("resp",resp)
                    this.AoaAttachmentList = resp.records;
                    this.pages=resp.pages;
                    this.total=resp.total;
                    this.size=resp.size;
                    this.current=resp.current;
                    console.info("current",this.current)
                })
            }
        },
        created() {
           this.loadList();
        }
    }).mount("#app");
</script>
</html>